import { Form, Input, Button, Toast } from 'antd-mobile'
import axios from 'axios'
import { useDispatch } from 'react-redux'
import { useNavigate } from 'react-router-dom'
export const My = () => {
	const navigate = useNavigate()
	const dispatch = useDispatch()
	const handleLogin = async (value: any) => {
		const resp = await axios.post('/api/login', value)
		const { code, token } = resp.data
		
		if(code === 200) {
			dispatch({ type: 'SET_USER', payload: value.user })
			localStorage.setItem('token', token)
			navigate(-1)
		} else {
			Toast.show({ content: '账户密码错误， 请重新输入' })
		}
	}
	return (
		<>
			<Form
				layout="horizontal"
				footer={<Button type='submit' color="primary" style={{ width: '100%' }}>登录</Button>}
				onFinish={handleLogin}
			>
				<Form.Item name="user" label="用户名">
					<Input ></Input>
				</Form.Item>
				<Form.Item name="pwd" label="密码">
					<Input ></Input>
				</Form.Item>
			</Form>
		</>
	)
}

export default My